<?php
session_start();
include_once("./php/connect_mysql.php");
$sql = "SELECT * FROM user,comment_info WHERE user.id = comment_info.id ORDER BY `time` DESC";
$result = $conn->query($sql);
?>
<script src="layui.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>PHP留言簿</title>
    <link rel="stylesheet" href="./css/layui.css">
</head>
<body style="background-color: #FAFAFA">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-blue">Guestbook</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
<!--            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">-->
<!--                <i class="layui-icon layui-icon-spread-left"></i>-->
<!--            </li>-->
            <li class="layui-nav-item">
                <a href="javascript:;">菜单</a>
                <dl class="layui-nav-child">
                    <!--                    <dd><a href="">首页</a></dd>-->
                    <dd><a href="page/login_page.php">登录</a></dd>
                    <dd><a href="page/register_page.php">注册</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <?php
                    if (isset($_SESSION['username'])) {
                        if(!empty($_SESSION['headpic_path'])){
                            echo '<img src="'.$_SESSION['headpic_path'].'"
                                     class="layui-nav-img">';
                        }
                        else{
                            echo '<img src="./uploads/default.jpeg"
                                     class="layui-nav-img">';
                        }
                        echo $_SESSION['username'];
                    } else
                        echo "未登录"; ?>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="./page/user_info.php">个人信息</a></dd>
                    <dd><a href="/php/logout.php">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-row">
        <!--        <div style="position: absolute;top: 60px;padding-bottom: 44px;">-->
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="layui-container">
                <div style="padding: 15px; font-size: 30px">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>留言展示</legend>
                    </fieldset>
                </div>
                <?php
                $_SESSION['ip'] = $_SERVER["REMOTE_ADDR"]; //获取客户端IP
                // 最新留言展示前面
                if ($result->num_rows > 0) {
                    //输出数据
                    while ($row = $result->fetch_assoc()) {
                        ?>
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <?php
                                if(!empty($row['headpic_path'])){
                                    echo '<img src="'.$row["headpic_path"].'"
                                     class="layui-nav-img">';
                                }
                                else{
                                    echo '<img src="./uploads/default.jpeg"
                                     class="layui-nav-img">';
                                }
                                ?>
                                <?php echo $row["username"]; ?>
                                <span class="layui-badge-rim">留言ID:<?php echo $row["cid"]; ?></span>
                                <span class="layui-badge layui-bg-blue"><?php echo $row["time"]; ?></span>
                                <span class="layui-badge layui-bg-blue"><?php echo "发布IP:" . $row["ip"]; ?></span>
                            </div>
                            <div class="layui-card-body">
                                <?php echo $row["comment"]; ?>
                            </div>

                            <div class="layui-btn-container" style="padding: 15px">
                                <a class="layui-btn layui-btn-primary layui-btn-sm layui-border-red"
                                   href="/php/like.php?cid=<?php echo $row['cid']; ?>"><i
                                            class="layui-icon layui-icon-heart-fill"> <?php echo $row['favor'] ?></i></a>
                                <?php
                                if (isset($_SESSION['username']) && $_SESSION['username'] == $row['username'] || $_SESSION['user_group'] == 'admin') {
//                                    echo '<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="lay_prompt()"><i
//                                        class="layui-icon"></i></button>';
                                    echo '<a s class="layui-btn layui-btn-danger layui-btn-sm" id="del_btn" href="php/del.php?cid=' . $row['cid'] . '"><i
                                        class="layui-icon"></i></a>';
//                                    echo '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="del_msg()"><i class="layui-icon"></i> 删除</button>';

                                    echo '<a  type="button" class="layui-btn layui-btn-sm layui-btn-normal" href="./page/edit.php?cid=' . $row['cid'] . '">修改</a>';
                                }
                                ?>
                            </div>
                        </div>
                        <?php
                    }
                } else {
                    echo "暂无留言！";
                }
                ?>
                <!--            分页-->
                <div class="layui-bg-gray" style="padding: 30px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-panel">
                                <div style="padding: 15px;">
                                    <div id="fenye"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-panel">
                            <div style="padding: 15px;">
                                <form class="layui-form" action="/php/add_comment.php" method="post">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">添加留言</label>
                                        <div class="layui-input-block">
                                            <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">
                                                立即提交
                                            </button>
                                            <button type="reset" class="layui-btn layui-btn-warm">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<script src="layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;


    });
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //自定义样式
        laypage.render({
            elem: 'fenye'
            , count: <?php echo mysqli_num_rows($result); ?>
            , limit: 5
            , layout: ['count', 'prev', 'page', 'next', 'skip']
            , theme: '#1E9FFF'
            , jump: function (obj) {
                console.log(obj)
            }
        });
        // laypage.render({
        //     elem: 'fenye'
        //     , count: 20
        //     , theme: '#1E9FFF'
        // });
    });
    //删除弹出确认
    // function del_msg() {
    //     layui.use('layer', function () {
    //         var layer = layui.layer;
    //         layer.confirm('是否删除该条留言？', {
    //             btn: ['确认','取消'] //按钮
    //         }, function(){
    //             document.getElementById("del_btn").click();
    //         }, function(){
    //             layer.msg('再多考虑一下吧', {
    //             });
    //         });
    //     });
    // }

    //prompt
    function lay_prompt() {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.prompt({
                formType: 2,
                value: '',
                title: '请输入要修改的内容',
                area: ['500px', '300px'] //自定义文本域宽高
            }, function (value, index, elem) {
                layer.close(index);
                layer.msg('修改后的内容：' + value);
            });
        });
    }

    //Demo
    // layui.use('form', function () {
    //     var form = layui.form;
    //
    //     //提交
    //     form.on('submit(formDemo)', function (data) {
    //         layer.msg(JSON.stringify(data.field));
    //         return false;
    //     });
    // });
</script>
</body>
</html>

